var Comment = React.createClass({
    render:function(){
        var messageBgString="left clearfix";
        if(this.props.data.isfrom){
            messageBgString+=" bg-info";
        }else{
            messageBgString+="";
        }
        return (
            <li className={messageBgString}>
                <span className="chat-img pull-left">
                    <img src="http://placehold.it/50/55C1E7/fff&amp;text=U" alt="User Avatar" className="img-circle"/>
                </span>
                <div className="chat-body clearfix">
                    <div className="header">
                        <strong className="primary-font">{this.props.data.topic}</strong> <small className="pull-right text-muted">
                            <span className="glyphicon glyphicon-time"></span>12 mins ago</small>
                    </div>
                    <p>
                       {this.props.data.payload}
                    </p>
                </div>
            </li>
        );
    }
}
);

var CommentList = React.createClass({

    render:function(){
        
        var commentNodes = this.props.data.map(function(comment){
            return (
                <Comment data={comment}  key={comment.id}/>
            );
        });
        
        return(
            <ul className="chat">
                {commentNodes}
            </ul>
        );
    }
});

var CommentBox = React.createClass({
    getInitialState:function(){
        return {data: []};
    },
    refreshData:function(){
        this.setState({data: this.props.data});
    },
    componentDidMount: function() {
        setInterval(this.refreshData, 500);
    },
    componentDidUpdate: function() {
        $("#chat_second").trigger("onAddMessage");
    },
    render:function(){
        return (
                <div className="panel-body">
                    <h1>会话消息</h1>
                    <CommentList data={this.state.data}/>
                </div>
                );
    }
});
